<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放 - 视频平台</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-brand">
            <a href="/">视频平台</a>
        </div>
        <div class="nav-links">
            <a href="/">首页</a>
            <a href="/videos">视频</a>
            <a href="/upload">上传</a>
            <a href="/profile">个人中心</a>
        </div>
        <div class="nav-auth">
            <div id="authButtons" style="display: flex;">
                <button onclick="showLoginModal()" class="btn btn-primary">登录</button>
                <button onclick="showRegisterModal()" class="btn btn-secondary">注册</button>
            </div>
            <div id="userMenu" class="user-menu" style="display: none;">
                <img id="userAvatar" src="/images/default-avatar.png" alt="用户头像">
                <span id="userNickname">未知用户</span>
                <button id="logoutBtn" onclick="logout()" class="btn btn-danger">退出</button>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container">
        <!-- 视频播放器 -->
        <div class="video-player-container">
            <div class="video-wrapper">
                <video id="videoPlayer" controls>
                    <source src="" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
        </div>

        <!-- 视频信息 -->
        <div class="video-info">
            <h1 id="videoTitle"></h1>
            <div class="video-meta">
                <div class="video-author">
                    <img id="authorAvatar" src="/images/default-avatar.png" alt="作者头像">
                    <span id="authorName"></span>
                </div>
                <div class="video-stats">
                    <span><i class="fas fa-eye"></i> <span id="viewCount">0</span></span>
                    <span><i class="fas fa-heart"></i> <span id="likeCount">0</span></span>
                    <span><i class="fas fa-comment"></i> <span id="commentCount">0</span></span>
                </div>
            </div>
            <div class="video-description" id="videoDescription"></div>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
            <div class="comment-form">
                <textarea id="commentInput" placeholder="发表评论..."></textarea>
                <button id="submitComment">发表评论</button>
            </div>
            <div class="comments-list" id="commentsList"></div>
        </div>
    </main>

    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <h2>登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="loginEmail">邮箱</label>
                    <input type="email" id="loginEmail" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" required>
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
            </form>
            <button class="btn btn-secondary" onclick="closeLoginModal()">取消</button>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <h2>注册</h2>
            <form id="registerForm">
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" required>
                </div>
                <div class="form-group">
                    <label for="registerNickname">昵称</label>
                    <input type="text" id="registerNickname" required>
                </div>
                <div class="form-group">
                    <label for="registerPhone">手机号</label>
                    <input type="tel" id="registerPhone" required>
                </div>
                <div class="form-group">
                    <label for="registerCaptcha">验证码</label>
                    <div class="captcha-group">
                        <input type="text" id="registerCaptcha" required>
                        <button type="button" class="btn btn-secondary" onclick="sendCaptcha()">获取验证码</button>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">注册</button>
            </form>
            <button class="btn btn-secondary" onclick="closeRegisterModal()">取消</button>
        </div>
    </div>

    <script src="/js/main.js"></script>
    <script src="/js/auth.js"></script>
    <script src="/js/video-player.js"></script>
</body>
</html> 